<template>
  <div class="conditions">
    <span class="title">选择日期</span>
    <Date-picker
      :type="type"
      :editable="false"
      :placeholder="nowDate"
      :v-model="value"
      :value="value"
      @on-change="dateChange"
      style="width: 200px"
    ></Date-picker>
  </div>
</template>

<script>
import util from "@/libs/util.js";
export default {
  props: {
    value: {
      type: Date,
      default: null
    },
    type: {
      type: String,
      default: "date"
    }
  },
  data() {
    return {
      nowDate: util.date.getNowFormatDate(this.type),
      options: {
        shortcuts: [
          {
            text: "今天",
            value() {
              return new Date();
            },
            onClick: picker => {
              //   this.$Message.info("点击了今天");
            }
          },
          {
            text: "昨天",
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              return date;
            },
            onClick: picker => {
              //   this.$Message.info("点击了昨天");
            }
          },
          {
            text: "一周前",
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              return date;
            },
            onClick: picker => {
              //   this.$Message.info("点击了一周前");
            }
          }
        ]
      }
    };
  },
  computed: {},
  watch: {
    value(val) {
      this.$emit("input", val);
    }
  },
  methods: {
    dateChange(date) {
      this.value = date;
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
